<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录 - 家电维修系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/all.min.css}" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .login-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .nav-tabs .nav-link {
            color: #6c757d;
        }
        .nav-tabs .nav-link.active {
            color: #0d6efd;
            font-weight: 500;
        }
        .tab-icon {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <ul class="nav nav-tabs nav-fill mb-4" id="loginTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="user-tab" data-bs-toggle="tab" data-bs-target="#user-login" type="button" role="tab">
                        <i class="fas fa-user tab-icon"></i>用户登录
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="repairman-tab" data-bs-toggle="tab" data-bs-target="#repairman-login" type="button" role="tab">
                        <i class="fas fa-tools tab-icon"></i>维修工登录
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="admin-tab" data-bs-toggle="tab" data-bs-target="#admin-login" type="button" role="tab">
                        <i class="fas fa-user-shield tab-icon"></i>管理员登录
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="loginTabContent">
                <!-- 用户登录表单 -->
                <div class="tab-pane fade show active" id="user-login" role="tabpanel">
                    <div id="userAlert" class="alert alert-danger d-none"></div>
                    <form id="userLoginForm">
                        <div class="mb-3">
                            <label for="userUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="userUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="userPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="userPassword" required>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">登录</button>
                            <a href="/register" class="btn btn-outline-secondary">注册新账号</a>
                        </div>
                    </form>
                </div>

                <!-- 维修工登录表单 -->
                <div class="tab-pane fade" id="repairman-login" role="tabpanel">
                    <div id="repairmanAlert" class="alert alert-danger d-none"></div>
                    <form id="repairmanLoginForm">
                        <div class="mb-3">
                            <label for="repairmanUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="repairmanUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="repairmanPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="repairmanPassword" required>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">登录</button>
                        </div>
                    </form>
                </div>

                <!-- 管理员登录表单 -->
                <div class="tab-pane fade" id="admin-login" role="tabpanel">
                    <div id="adminAlert" class="alert alert-danger d-none"></div>
                    <form id="adminLoginForm">
                        <div class="mb-3">
                            <label for="adminUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="adminUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="adminPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="adminPassword" required>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 检查是否已登录
            const token = localStorage.getItem('token');
            const adminToken = localStorage.getItem('adminToken');
            
            if (adminToken) {
                window.location.href = '/admin-dashboard';
            } else if (token) {
                // 需要判断是用户还是维修工
                $.ajax({
                    url: '/api/auth/check-role',
                    type: 'GET',
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    success: function(response) {
                        if (response.role === 'REPAIRMAN') {
                            window.location.href = '/repairman';
                        } else {
                            window.location.href = '/';
                        }
                    }
                });
            }

            // 用户登录
            $('#userLoginForm').on('submit', function(e) {
                e.preventDefault();
                login('user', {
                    username: $('#userUsername').val(),
                    password: $('#userPassword').val()
                });
            });

            // 维修工登录
            $('#repairmanLoginForm').on('submit', function(e) {
                e.preventDefault();
                login('repairman', {
                    username: $('#repairmanUsername').val(),
                    password: $('#repairmanPassword').val()
                });
            });

            // 管理员登录
            $('#adminLoginForm').on('submit', function(e) {
                e.preventDefault();
                login('admin', {
                    username: $('#adminUsername').val(),
                    password: $('#adminPassword').val()
                });
            });

            // 统一登录处理函数
            function login(role, data) {
                const endpoints = {
                    user: '/api/auth/login',
                    repairman: '/api/repairman/login',
                    admin: '/api/admin/login'
                };

                const redirects = {
                    user: '/',
                    repairman: '/repairman',
                    admin: '/admin-dashboard'
                };

                $.ajax({
                    url: endpoints[role],
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(response) {
                        if (role === 'admin') {
                            localStorage.setItem('adminToken', response.token);
                        } else {
                            localStorage.setItem('token', response.token);
                        }
                        window.location.href = redirects[role];
                    },
                    error: function(xhr) {
                        $(`#${role}Alert`)
                            .removeClass('d-none')
                            .text(xhr.responseText || '登录失败，请检查用户名和密码');
                    }
                });
            }

            // 切换标签页时清除错误提示
            $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
                $('.alert').addClass('d-none');
            });
        });
    </script>
</body>
</html> 